<template>
  <div class="user">
    <div class="u-header">
      <div class="u-h-title"><i class="iconfont icon-yonghu1"></i>用户管理</div>
    </div>
    <div class="u-search">
      <n-input
        class="u-s-input"
        placeholder="搜索用户"
        round
        size="small"
        v-model:value="searchVal"
      >
        <template #suffix>
          <i
            class="iconfont icon-sousuo"
            @click="searchParams.name = searchVal"
          ></i>
        </template>
      </n-input>
      <n-button
        v-if="store.oj.premission.includes('manage:user:add')"
        class="u-s-btn"
        size="small"
        round
        type="success"
        @click="hanlderToCreate"
        ><i class="iconfont icon-tianjia"></i>新增用户</n-button
      >
    </div>
    <div class="u-table">
      <el-table class="table" :data="userList.records" size="small" stripe>
        <el-table-column
          type="index"
          label="序号"
          width="100%"
          align="center"
          :index="indexMethod"
        />
        <el-table-column
          prop="username"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column label="真实姓名" align="center">
          <template #default="scoped">
            {{ scoped.row.realName || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template #default="scoped">
            {{ scoped.row.phone || "--" }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column> -->
        <el-table-column label="用户权限" align="center">
          <template #default="scoped">
            <div class="auths">
              <n-select
                class="select"
                size="tiny"
                :disabled="
                  store.oj.getPermission.find(
                    (item) => item.unKey == 'manage:user:role'
                  ) || scoped.row.username == 'root'
                "
                v-model:value="scoped.row.roleList[0].unKey"
                :options="roles"
                @update:value="showUpdateDialog(scoped.row)"
              ></n-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="用户状态" align="center">
          <template #default="scoped">
            <el-tooltip content="用户是否可用" placement="top">
              <n-switch
                :disabled="
                  store.oj.getPermission.find(
                    (item) => item.unKey == 'manage:user:role'
                  ) || scoped.row.username == 'root'
                "
                v-model:value="scoped.row.status"
                size="small"
                :checked-value="0"
                :unchecked-value="1"
                @change="updateStatus(scoped.row.id, scoped.row.status)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="操作" align="center">
          <template #default="scoped">
            <div class="u-t-comparation">
              <n-button
                class="nbtn"
                size="tiny"
                v-if="store.oj.premission.includes('manage:user:update')"
                :disabled="
                  store.oj.getPermission.find(
                    (item) => item.unKey == 'manage:user:role'
                  ) || scoped.row.username == 'root'
                "
                type="info"
                @click="hanlderToEdit(scoped.row)"
                ><i class="iconfont icon-bianji"></i
              ></n-button>
              <n-button
                class="nbtn"
                size="tiny"
                v-if="store.oj.premission.includes('manage:user:del')"
                :disabled="
                  store.oj.getPermission.find(
                    (item) => item.unKey == 'manage:user:role'
                  ) || scoped.row.username == 'root'
                "
                type="error"
                @click="delUserByIds(scoped.row.id)"
                ><i class="iconfont icon-shanchu"></i
              ></n-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <n-modal v-model:show="isShowAdd">
      <n-card :bordered="false" role="dialog" aria-modal="true" class="card">
        <n-tabs type="segment" animated class="card-d">
          <n-tab-pane name="selection1" tab="批量导入" class="pane">
            <div class="temps">
              <div class="tip">Tips:&emsp;红色表头为必填字段</div>
              <n-button
                class="btn"
                size="small"
                type="success"
                round
                @click="getTemplate"
              >
                <i class="iconfont icon-xiazai"></i>
                下载模板
              </n-button>
            </div>
            <el-upload
              class="upload-demo"
              :show-file-list="false"
              :auto-upload="false"
              action="#"
              :on-change="fileChange"
              accept=".xls,.xlsx"
              drag
            >
              <i class="iconfont icon-icon_update bigIcon"></i>
              <br />
              <span>拖拽上传excel文件</span>
            </el-upload>
            <el-table class="table" :data="excelUsers" stripe size="small">
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="username"
                label="用户名"
                align="center"
              ></el-table-column>
              <el-table-column prop="shcool" label="学校" align="center">
                <template #default="scoped">
                  {{ scoped.row.shcool || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="college" label="学院" align="center">
                <template #default="scoped">
                  {{ scoped.row.college || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="major" label="专业班级" align="center">
                <template #default="scoped">
                  {{ scoped.row.major || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="number" label="学号" align="center">
                <template #default="scoped">
                  {{ scoped.row.number || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="realName" label="真实姓名" align="center">
                <template #default="scoped">
                  {{ scoped.row.realName || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="gender" label="性别" align="center">
                <template #default="scoped">
                  {{ scoped.row.gender || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="email" label="邮箱" align="center">
                <template #default="scoped">
                  {{ scoped.row.email || "--" }}
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="手机号" align="center">
                <template #default="scoped">
                  {{ scoped.row.phone || "--" }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template #default="scoped">
                  <div>
                    <n-button
                      size="tiny"
                      type="error"
                      @click="delUser2(scoped.row.username)"
                    >
                      <i class="iconfont icon-shanchu"></i>
                    </n-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="footer">
              <n-button
                class="btn"
                type="success"
                size="small"
                @click="saveUsers"
                >保存</n-button
              >
            </div>
          </n-tab-pane>
          <n-tab-pane name="selection2" tab="批量生成" class="pane">
            <n-form class="form">
              <div class="fix">
                <n-form-item label="用户名前缀" class="formitem">
                  <n-input
                    class="input"
                    placeholder="用户名前缀"
                    v-model:value="userAddData.prefix"
                  ></n-input>
                </n-form-item>
                <n-form-item label="用户名后缀" class="formitem">
                  <n-input
                    class="input"
                    placeholder="用户名后缀"
                    v-model:value="userAddData.suffix"
                  ></n-input>
                </n-form-item>
              </div>
              <div class="fix">
                <n-form-item label="起始序号" class="formitem">
                  <n-input-number
                    class="input"
                    :min="1"
                    placeholder="起始序号"
                    v-model:value="userAddData.start"
                  ></n-input-number>
                </n-form-item>
                <n-form-item label="结束序号" class="formitem">
                  <n-input-number
                    class="input"
                    :min="userAddData.start || 0"
                    placeholder="结束序号"
                    v-model:value="userAddData.end"
                  ></n-input-number>
                </n-form-item>
              </div>
              <div class="fix2">
                <n-tag type="success"
                  >用户名位数需大于5位，用户密码默认为用户名</n-tag
                >
              </div>
            </n-form>
            <div class="footer">
              <n-button
                class="btn"
                type="success"
                size="small"
                @click="generateUser"
                >生成</n-button
              >
            </div>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </n-modal>
    <n-modal v-model:show="isShowEdit">
      <n-card :bordered="false" role="dialog" aria-modal="true" class="card2">
        <el-scrollbar class="card-conatin">
          <h2 class="title">用户信息</h2>
          <div class="item">
            <span class="text">用户名</span>
            <n-input
              :disabled="!isUpdateUser"
              v-model:value="currentUserInfo.username"
              class="contain2"
              size="small"
              placeholder=""
            ></n-input>
            <n-button
              class="btn"
              size="small"
              type="success"
              v-if="!isUpdateUser"
              @click="isUpdateUser = true"
              >修改用户名</n-button
            >
            <n-button
              class="btn"
              size="small"
              type="error"
              v-else="isUpdateUser"
              @click="isUpdateUser = false"
              >取消修改</n-button
            >
          </div>
          <div class="item">
            <span class="text">真实姓名</span>
            <n-input
              :maxlength="24"
              v-model:value="currentUserInfo.realName"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">昵称</span>
            <n-input
              :maxlength="24"
              v-model:value="currentUserInfo.nickname"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">学号</span>
            <n-input
              :maxlength="30"
              show-count
              v-model:value="currentUserInfo.number"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">手机号</span>
            <n-input
              :maxlength="11"
              show-count
              v-model:value="currentUserInfo.phone"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">邮箱</span>
            <n-input
              :maxlength="30"
              show-count
              v-model:value="currentUserInfo.email"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">QQ</span>
            <n-input
              :maxlength="12"
              show-count
              v-model:value="currentUserInfo.qq"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">学校</span>
            <n-input
              :maxlength="12"
              v-model:value="currentUserInfo.shcool"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">学院</span>
            <n-input
              :maxlength="12"
              v-model:value="currentUserInfo.college"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">专业</span>
            <n-input
              :maxlength="12"
              v-model:value="currentUserInfo.major"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">Github</span>
            <n-input
              v-model:value="currentUserInfo.github"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">博客</span>
            <n-input
              v-model:value="currentUserInfo.blog"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">密码</span>
            <n-input
              :disabled="!isUpdatePwd"
              v-model:value="currentUserInfo.password"
              class="contain2"
              size="small"
              show-password-on="mousedown"
              placeholder=""
              type="password"
            ></n-input>
            <n-button
              class="btn"
              size="small"
              type="success"
              v-if="!isUpdatePwd"
              @click="isUpdatePwd = true"
              >修改密码</n-button
            >
            <n-button
              class="btn"
              size="small"
              type="error"
              v-else="isUpdatePwd"
              @click="isUpdatePwd = false"
              >取消修改</n-button
            >
          </div>
          <div class="item">
            <span class="text">签名</span>
            <n-input
              :maxlength="100"
              show-count
              v-model:value="currentUserInfo.signature"
              class="contain"
              size="small"
              placeholder=""
            ></n-input>
          </div>
          <div class="item">
            <span class="text">头像</span>
            <el-image
              class="avatar"
              :src="$getAvatarUrl(currentUserInfo.avatar)"
            ></el-image>
            <n-button
              class="btn2"
              size="small"
              type="success"
              @click="currentUserInfo.avatar = ''"
              >清空头像</n-button
            >
          </div>
          <div class="item">
            <span class="text">状态</span>
            <n-switch
              v-model:value="currentUserInfo.status"
              :checked-value="0"
              :unchecked-value="1"
            ></n-switch>
          </div>
          <div class="footer-btn">
            <n-button
              class="btn"
              round
              type="success"
              size="small"
              @click="updateUserInfo"
              >保存</n-button
            >
          </div>
        </el-scrollbar>
      </n-card>
    </n-modal>
    <div class="r-footer">
      <el-pagination
        class="pagination"
        :page-sizes="[20, 50, 100]"
        background
        small
        layout="prev, pager, next,sizes"
        :total="Number(userList.total)"
        v-model:current-page="searchParams.pageNum"
        v-model:page-size="searchParams.pageSize"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="系统提示" width="500">
      <span>确认更改该用户权限？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="(dialogVisible = false), getUserInfoList()"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="(dialogVisible = false), updateAuth()"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import {
  getUserInfoListAPI,
  delUserByIdsAPI,
  generateUserAPI,
  updateUserInfoAPI,
  updateAuthAPI,
  updateStatusAPI,
  getTemplateAPI,
  saveUsersAPI,
  getAllRoleAPI,
} from "@/api/adminAPI/adminAPI";
import { ElMessage, ElNotification } from "element-plus";
import * as XLSX from "xlsx";
import useStore from "@/store";
import { debounce } from "@/utils/global.js";
const store = useStore();
onMounted(() => {
  getUserInfoList();
  getALLRole();
});

const userList = ref({
  records: [],
  total: 20,
});

const searchVal = ref("");
watch(searchVal, (newV) => {
  if (newV.length == 0) {
    searchParams.name = newV;
    getUserInfoList();
  }
});

const searchParams = reactive({
  pageNum: 1,
  pageSize: 20,
  authLevel: "",
  name: "",
});

watch(searchParams, (newV) => {
  getUserInfoList();
});

const getUserInfoList = debounce(async () => {
  await getUserInfoListAPI(searchParams)
    .then((res) => {
      if (res.data.code === 200) {
        userList.value = res.data.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}, 100);

const indexMethod = (index) => {
  return (searchParams.pageNum - 1) * searchParams.pageSize + index + 1;
};

//添加用户
const isShowAdd = ref(false);
const hanlderToCreate = () => {
  isShowAdd.value = true;
};

//跳转编辑页
const isShowEdit = ref(false);
const currentUserInfo = ref({});
const hanlderToEdit = (data) => {
  currentUserInfo.value = data;
  isShowEdit.value = true;
};

//更新用户信息
const updateUserInfo = async () => {
  if (isUpdatePwd.value == false) {
    currentUserInfo.value.password = null;
  }
  await updateUserInfoAPI(currentUserInfo.value)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
        getUserInfoList();
        isShowEdit.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//删除用户
const delUserByIds = debounce(async (id) => {
  await delUserByIdsAPI([id])
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
        getUserInfoList();
      }
    })
    .catch((err) => {
      console.log(err);
    });
}, 100);

//按规则批量生成用户
const userAddData = ref({
  prefix: "",
  suffix: "",
  start: null,
  end: null,
});
const generateUser = debounce(async () => {
  if ((userAddData.value.prefix + userAddData.value.suffix).length < 5) {
    ElMessage.error("用户名应大于5位");
    return;
  }
  await generateUserAPI(userAddData.value)
    .then((res) => {
      if (res.data.code === 200) {
        getUserInfoList();
        isShowAdd.value = false;
        userAddData.value = {
          prefix: "",
          suffix: "",
          start: null,
          end: null,
        };
        if (res.data.data.successSaveList.length == 0) {
          ElNotification({
            title: "添加失败",
            message: res.data.data.failSaveList,
            type: "error",
          });
        } else if (res.data.data.failSaveList.length == 0) {
          ElNotification({
            title: "添加成功",
            message: res.data.data.successSaveList,
            type: "success",
          });
        } else {
          ElNotification({
            title: "部分添加失败",
            message: res.data.data.failSaveList,
            type: "warning",
          });
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}, 100);

//用户角色
const roles = ref([]);
const isUpdateUser = ref(false);
//是否更新用户密码
const isUpdatePwd = ref(false);
const dialogVisible = ref(false);
//更新权限（管理员）
const updateAuth = async () => {
  await updateAuthAPI(currentUpdator.value)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
//当前更新权限者
const currentUpdator = ref({});
const showUpdateDialog = (row) => {
  dialogVisible.value = true;
  currentUpdator.value = {
    uid: row.id,
    authLevel: row.roleList[0].unKey,
  };
};

//处理excel(解析)
const excelUsers = ref([]);
const fileChange = (uploadFile, uploadFiles) => {
  const file = uploadFile.raw;
  if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
    ElMessage.error("请上传xls/xlsx格式文件");
    return false;
  }
  // 读取表格
  const fileReader = new FileReader();
  fileReader.onload = (ev) => {
    const workbook = XLSX.read(ev.target.result, {
      type: "binary",
    });
    const wsname = workbook.SheetNames[0];
    const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
    let arr = ws.map((item) => {
      return {
        username: item["用户名"],
        password: item["密码"],
        shcool: item["学校"] || "",
        college: item["学院"] || "",
        major: item["专业班级"] || "",
        number: item["学号"] || "",
        realName: item["真实姓名"] || "",
        gender: item["性别"] || "",
        email: item["邮箱"] || "",
        phone: item["手机号"] || "",
      };
    });
    for (let i = 0; i < arr.length; i++) {
      for (let j = 0; j < excelUsers.value.length; j++) {
        if (arr[i].username == excelUsers.value[j].username) {
          arr.splice(i, 1);
        }
      }
    }
    excelUsers.value = [...excelUsers.value, ...arr];
  };
  fileReader.readAsBinaryString(file);
};
const saveUsers = async () => {
  await saveUsersAPI(excelUsers.value)
    .then((res) => {
      if (res.data.code === 200) {
        if (res.data.data.successSaveList.length == 0) {
          ElNotification({
            title: "添加失败名单：",
            message: res.data.data.failSaveList,
            type: "error",
            duration:
              res.data.data.failSaveList.length < 10
                ? res.data.data.failSaveList.length * 1000
                : 10000,
          });
        } else if (res.data.data.failSaveList.length == 0) {
          ElNotification({
            title: "添加成功",
            message: res.data.data.successSaveList,
            type: "success",
          });
        } else {
          ElNotification({
            title: "添加失败名单：",
            message: res.data.data.failSaveList,
            type: "warning",
            duration:
              res.data.data.failSaveList.length < 10
                ? res.data.data.failSaveList.length * 1000
                : 10000,
          });
        }
        getUserInfoList();
        isShowAdd.value = false;
        excelUsers.value = [];
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const delUser2 = (username) => {
  excelUsers.value.forEach((item, index) => {
    if (item.username === username) {
      excelUsers.value.splice(index, 1);
      return;
    }
  });
};

//获取导入用户模板
const getTemplatetimer = ref(0);
const getTemplate = async () => {
  const now = Date.now();
  if (now - getTemplatetimer.value < 30000) {
    ElMessage.warning("请勿频繁下载");
    return;
  }
  getTemplatetimer.value = now;
  await getTemplateAPI()
    .then((res) => {
      const url = window.URL.createObjectURL(new Blob([res.data]), {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "userTemplate.xlsx"); // 设置文件名
      document.body.appendChild(link);
      link.click();
    })
    .catch((err) => {
      console.log(err);
    });
};
const getALLRole = async () => {
  try {
    const response = await getAllRoleAPI();
    const { code, data, msg } = response.data;
    if (code == 200) {
      // allRoleList.value = data;
      roles.value = data.map((item) => {
        return {
          label: item.name,
          value: item.unKey,
        };
      });
    }
  } catch (err) {
    console.log(err);
  }
};

const updateStatus = debounce(async (uid, status) => {
  const a = {
    uid: uid,
    status: status,
  };
  await updateStatusAPI(a)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}, 100);
</script>

<style lang="less" scoped>
.user {
  margin: auto;
  width: 96%;
  height: 92vh;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .u-header {
    display: flex;

    .u-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 26px;
        height: 30px;
      }
    }
  }

  .u-search {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin: 20px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .u-s-input {
      height: 30px;
      line-height: 30px;
      width: 20%;
    }

    .u-s-btn {
      margin: auto 20px;
    }
  }

  .u-table {
    width: 100%;
    margin: 10px auto 0 auto;

    .table {
      height: 72vh;

      .u-t-comparation {
        display: flex;
        justify-content: center;

        .nbtn {
          margin: auto 5px;
        }
      }
    }
  }

  .r-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}

::v-deep(.n-card__content) {
  padding: 10px !important;
}

.card {
  border-radius: 20px;
  overflow: hidden;
  width: 80vw;
  height: 85vh;

  .card-d {
    display: flex;
    flex-direction: column;

    .title {
      border-bottom: 1px solid @bgColor;
      padding-bottom: 10px;
      color: #555;
    }

    .temps {
      display: flex;
      margin-bottom: 10px;

      .tip {
        color: rgb(207, 51, 51);
        margin: auto auto auto 3%;
        font-size: 12px;
        font-weight: 550;
      }

      .btn {
        margin: auto 3% auto auto;
      }
    }
  }

  .pane {
    display: flex;
    flex-direction: column;
    height: 75vh;

    .upload-demo {
      .iconfont {
        font-size: 28px;
      }
    }

    .table {
      height: 65vh;
    }

    .form {
      margin: auto;

      .fix {
        display: flex;
        width: 100%;

        .formitem {
          margin-right: 20px;
          width: 100%;

          .input {
            width: 100%;
          }
        }
      }

      .fix2 {
        display: flex;
        justify-content: center;
      }
    }

    .footer {
      height: 60px;
      display: flex;
      justify-content: center;

      .btn {
        width: 10%;
      }
    }
  }
}

.card2 {
  border-radius: 20px;
  overflow: hidden;
  width: 40vw;
  height: 85vh;

  .card-conatin {
    height: 80vh;
    width: 40vw;
    display: flex;
    flex-direction: column;

    .title {
      border-bottom: 1px solid @bgColor;
      padding-bottom: 10px;
      color: #555;
    }

    .item {
      display: flex;
      width: 70%;
      margin: 10px auto;
      max-height: 50px;

      .text {
        width: 20%;
        font-size: 16px;
        color: #555;
      }

      .contain {
        width: 80%;
      }

      .avatar {
        border-radius: 50%;
        border: 3px solid #888;
        height: 40px;
        width: 40px;
      }

      .contain2 {
        width: 56%;
      }

      .btn {
        width: 22%;
        margin: auto;
      }

      .btn2 {
        width: 22%;
        margin: auto 0 auto auto;
      }
    }

    .footer-btn {
      margin: 30px 0 0 0;
      display: flex;
      justify-content: center;

      .btn {
        width: 10%;
      }
    }
  }
}
</style>
